<template>
  <div>
    <van-cell >
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #title>
        <!-- 单图 -->
        <div class="title-box">
          <!-- 标题 -->
          <span>{{ artItem?.title }}</span>
          <img
            v-if="artItem?.cover.type === 1"
            class="thumb"
            v-lazy="artItem?.cover.images[0]"
          />
        </div>
        <!-- 多图 -->
        <div class="thumb-box" v-if="artItem?.cover.type > 1">
          <img
            class="thumb"
            v-for="(itemUrl, index) in artItem?.cover.images"
            :key="index"
            v-lazy="itemUrl"
          />
        </div>
        <!-- <div class="thumb-box" v-if="artItem?.cover.type > 1">
          <van-image
            class="thumb"
            v-for="(itemUrl, index) in artItem?.cover.images"
            :key="index"
            :src="itemUrl"
          >
            <template v-slot:error>图片加载失败</template>
          </van-image>
        </div> -->
      </template>
      <template #label>
        <div class="label-box">
          <div>
            <span>{{ artItem?.aut_name }}</span>
            <span>{{ artItem?.comm_count }}</span>
            <span>{{ timeAgo(artItem?.pubdate) }}</span>
          </div>
          <!-- 反馈按钮 -->
          <van-icon
            name="cross"
            @click.stop="showItem = !showItem"
            v-show="is_Show"
          />
        </div>
      </template>
    </van-cell>
    <!-- 反馈面板 -->
    <van-action-sheet
      v-model="showItem"
      :actions="actions"
      @select="onSelect"
      @cancel="cancelFn"
      @click-overlay="cancelFn"
      :cancel-text="bottomText"
      get-container="body"
    />
  </div>
</template>

<script>
// 点击反馈辣鸡内容打开另外弹窗
import { timeAgo } from '@/utils/day'
import { firstActions, secondActions } from '@/api/report'
export default {
  name: 'HmttArticleitme',
  props: {
    artItem: {
      type: Object,
      default: () => {}
    },
    is_Show: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      showItem: false, // 反馈面板
      actions: firstActions,
      bottomText: '取消'
    }
  },
  created () {},
  mounted () {},

  methods: {
    timeAgo,
    onSelect (action, item) {
      // ！！！！！！！！！！！注意：不能用item 做判断，重新赋值后下标1会重复
      if (action.name === '反馈垃圾内容') {
        this.actions = secondActions
        this.bottomText = '返回'
      } else if (action.name === '不感兴趣') {
        this.$emit('disLikeEV', this.artItem.art_id)
        this.showItem = false
      } else {
        // 这是其他的举报内容
        this.$emit('reportEV', this.artItem.art_id, action.value)
        this.showItem = false
      }
    },
    cancelFn () {
      if (this.bottomText === '返回') {
        // 关闭瞬间打开
        this.showItem = !this.showItem
        this.bottomText = '取消'
        this.actions = firstActions
      }
    }
  }
}
</script>

<style lang="less" scoped>
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}
/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
